import React from 'react'
import BG from '../../components/bg'
import './style.scss'
import { Form, Input, Button } from 'antd'
import axios from 'axios'; 
import {login} from '../../api'
import { ll } from '../../utils/storage';
import { useNavigate } from 'react-router-dom'

interface LoginRawState {
  username: string
  password: string
}

const Index: React.FC = () => {
  const navigate = useNavigate()
  const onFinish = async (value: LoginRawState) => {
    const resp = await login(value);
    if(resp.data.code === 200) {
      // 存储 数据
      ll.setItem('userInfo', resp.data.data.userInfo)
      ll.setItem('token', resp.data.data.token)
      // 进入首页
      navigate('/')
    }
  }
  return (
    <div>
      <BG></BG>
      <div className='login'>
        <div className="content">
          <Form labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} onFinish={onFinish}>
            <Form.Item wrapperCol={{ span: 24 }}>
              <h1 style={{ textAlign: 'center' }}>用户登录</h1>
            </Form.Item>
            <Form.Item label="用户名：" name="username">
              <Input></Input>
            </Form.Item>
            <Form.Item label="密码：" name="password">
              <Input.Password></Input.Password>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 4, span: 18 }}>
              <Button block type="primary" htmlType='submit'>登录</Button>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 4, span: 18 }}>
              <Button block type="primary" danger>重置</Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}

export default Index